<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>预定管理</el-breadcrumb-item>
      <el-breadcrumb-item>预定列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card shadow="never" :body-style="{ padding: '5px' }">
      <div class="list">
        <el-row :gutter="30">
          <el-col :span="4">
            <el-select clearable v-model="searchParams.type" placeholder="搜索条件">
              <el-option
                v-for="item in selectParams"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>

          <el-col :span="4">
            <div>
              <el-input
                clearable
                class="searchParamInput"
                placeholder="请输入内容"
                v-model="searchParams.searchParam"
                @keyup.enter.native="getOrderList"
              ></el-input>
            </div>
          </el-col>

          <el-col :span="5" :push="1">
            <el-tooltip content="点击搜索" placement="top" effect="dark">
              <el-button type="primary" size="medium" icon="el-icon-search" @click="getOrderList"></el-button>
            </el-tooltip>

            <el-tooltip content="导出excel" placement="top" effect="dark">
              <el-button type="info" size="medium" icon="el-icon-download" @click="exportExcel"></el-button>
            </el-tooltip>
          </el-col>

          <el-col :span="10">
            <el-tooltip content="点击刷新" placement="top" effect="dark">
              <el-button
                @click="refreshTable"
                class="refresh"
                type="success"
                icon="el-icon-refresh"
                circle
              ></el-button>
            </el-tooltip>
          </el-col>
        </el-row>

        <el-table
          highlight-current-row
          :data="orderList"
          stripe
          border
          style="width: 1300px"
          header-align="center"
        >
          >
          <el-table-column type="expand" align="center">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="申请编号：">
                  <span>{{ props.row.applyId }}</span>
                </el-form-item>
                <el-form-item label="教室名：">
                  <span>{{ props.row.classroomName }}</span>
                </el-form-item>
                <el-form-item label="申请人姓名：">
                  <span>{{ props.row.applicant }}</span>
                </el-form-item>
                <el-form-item label="开始时间：">
                  <span>{{ props.row.beginTime }}</span>
                </el-form-item>
                <el-form-item label="联系方式：">
                  <span>{{ props.row.applicantPhone }}</span>
                </el-form-item>
                <el-form-item label="结束时间：">
                  <span>{{ props.row.beginTime }}</span>
                </el-form-item>

                <el-form-item label="审核人：">
                  <span>{{ props.row.reviewer }}</span>
                </el-form-item>

                <el-form-item label="提交申请的时间：">
                  <span>{{ props.row.reviewerTime }}</span>
                </el-form-item>
                <el-form-item label="审核状态：">
                  <span v-if="props.row.applyStatus==0">待审核</span>
                  <span v-else-if="props.row.applyStatus==1">审核通过</span>
                  <span v-else="props.row.applyStatus==2">已驳回</span>
                </el-form-item>

                <el-form-item label="申请理由：">
                  <span v-html="props.row.usedReason"></span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="applyId" width="180" label="申请编号"></el-table-column>
          <el-table-column
            resizable
            prop="applicant"
            align="center"
            sortable
            label="申请人"
            width="90px"
          ></el-table-column>
          <el-table-column prop="classroomName" align="center" label="教室名" width="80px">
            <template slot-scope="scope">
              <el-tag type="danger" effect="plain">{{scope.row.classroomName}}</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            :filters="[{ text: '审核通过', value: 1 }, { text: '待审核', value: 0 },{ text: '已驳回', value: 2 }]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
            align="center"
            prop="applyStatus"
            width="110px"
            label="审核状态"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.applyStatus==0" effect="dark" type="info">待审核</el-tag>
              <el-tag v-else-if="scope.row.applyStatus==1" effect="dark" type="success">审核通过</el-tag>
              <el-tag v-else="scope.row.applyStatus==2" effect="dark" type="warning">已驳回</el-tag>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="beginTime" sortable label="开始时间" width="185px">
            <template slot-scope="scope">
              <el-tag type="success">
                <span style="margin-left: 10px">{{ scope.row.beginTime }}</span>
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="endTime" sortable label="结束时间" width="185px">
            <template slot-scope="scope">
              <el-tag type="danger">
                <span style="margin-left: 10px">{{ scope.row.endTime }}</span>
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="applicantEmail" width="200px" label="邮箱"></el-table-column>

          <el-table-column align="center" prop="reviewer" width="120px" label="审核人"></el-table-column>
          <el-table-column align="center" prop="reviewerTime" sortable label="审核时间" width="180px">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.reviewerTime}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" fixed="right" label="操作" width="180px">
            <template slot-scope="scope">
              <el-button
                slot="reference"
                size="mini"
                type="success"
                @click="openCheckOrder(scope.row)"
              >去审核</el-button>

              <el-popconfirm
                @confirm="isconfirmDelete( scope.row)"
                confirm-button-text="必须要删了"
                cancel-button-text="点错了"
                icon="el-icon-info"
                icon-color="red"
                title="确定要删除吗"
              >
                <el-button class="deleteOrder" slot="reference" size="mini" type="danger">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>

          <el-table-column
            resizable
            show-overflow-tooltip
            align="left"
            prop="usedReason"
            sortable
            label="申请理由"
            width="110px"
          >
            <template slot-scope="scope">
              <span v-html="scope.row.usedReason"></span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchParams.currentPage"
          :page-sizes="[5, 10, 40, 80]"
          :page-size="searchParams.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>

      <!-- 预定详情对话框 -->
      <div class="dialog-form">
        <el-dialog
          center
          modal
          top="60px"
          width="50%"
          @close="closeDialog"
          title="预定详情"
          :visible="checkOrderDialog"
          :before-close="handleClose"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="tag-pattern">
                申请编号：
                <el-tag>{{orderForm.applyId}}</el-tag>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="tag-pattern">
                申请人：
                <el-tag class="apply-tag">{{orderForm.applicant}}</el-tag>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="tag-pattern">
                联系方式：
                <el-tag>{{orderForm.applicantPhone}}</el-tag>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="tag-pattern">
                教室名称：
                <el-tag>{{orderForm.classroomName}}</el-tag>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="tag-pattern">
                开始时间：
                <el-tag>{{orderForm.beginTime}}</el-tag>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="tag-pattern">
                结束时间：
                <el-tag>{{orderForm.endTime}}</el-tag>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="tag-pattern">
                审核状态
                <el-tag type="info" v-if="orderForm.applyStatus==0" class="inspect">待审核</el-tag>
                <el-tag type="success" v-else-if="orderForm.applyStatus==1" class="inspect">审核通过</el-tag>
                <el-tag type="danger" v-else="orderForm.applyStatus==2" class="inspect">已驳回</el-tag>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="tag-pattern">
                提交时间：
                <el-tag>{{orderForm.gmtModified}}</el-tag>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="tag-pattern">
                <el-card>
                  申请理由：
                  <p v-html="orderForm.usedReason"></p>
                </el-card>
              </div>
            </el-col>
          </el-row>

          <div slot="footer" class="dialog-footer">
            <el-button
              class="operation-check-ok"
              size="medium"
              type="primary"
              @click="toConfirm"
            >通 过</el-button>
            <el-popconfirm
              @confirm="toReject"
              @cancel="confirmCancel"
              confirm-button-type="success"
              cancel-button-type="info"
              confirm-button-text="立即驳回"
              cancel-button-text="我要留言"
              icon-color="blue"
              icon="el-icon-warning"
              title="请选择"
            >
              <el-button slot="reference" size="medium" type="warning">驳 回</el-button>
              <el-button>删 除</el-button>
            </el-popconfirm>
          </div>
        </el-dialog>
      </div>

      <!-- 留言对话框 -->

      <el-dialog
        center
        title="驳回原因"
        :visible.sync="messageDialog"
        :width="folder ==false? '580px':'1000px'"
        top="60px"
        :before-close="handleClose"
      >
        <div class="dialogDiv">
          <el-row>
            <el-col :span="24">
              <el-tooltip class="item" effect="dark" content="查看历史留言" placement="top">
                <i
                  class="open-history-folder"
                  :class="folder==true?'el-icon-arrow-right':'el-icon-arrow-left'"
                  style="font-size:25px; color :red;"
                  @click="isfolder"
                ></i>
              </el-tooltip>
            </el-col>
            <el-col :span="12">
              <div class="message-apply-num">
                申请编号:
                <el-tag class="message-app-body">{{orderForm.applyId}}</el-tag>
              </div>
              <el-form :rules="messageRules" ref="messageRulesRef" :model="messageForm">
                <el-form-item prop="content" label="留言内容" label-width="120px">
                  <div class="edit_container">
                    <quill-editor
                      v-model="messageForm.content"
                      ref="myQuillEditor"
                      :options="editorOption"
                    ></quill-editor>
                  </div>
                </el-form-item>
              </el-form>
            </el-col>

            <el-col v-if="folder ==true" :span="12">
              <div class="block">
                <el-timeline :reverse="timeLineIsReverse">
                  <el-timeline-item
                    v-for="(item ,index) in historyMessageList"
                    :key="index"
                    :timestamp="item.gmtCreate"
                    placement="top"
                  >
                    <el-card shadow="always">
                      <div v-html="item.content"></div>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </el-col>
          </el-row>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addMessage('messageRulesRef')">添加留言</el-button>
          <el-button type="success" @click="toReject">马上驳回</el-button>
          <el-button type="info" @click="messageDialog = false">返 回</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
let moment = require("moment");
export default {
  inject: ["reload"],
  name: "ManagerList",
  data() {
    return {
      orderList: [], //总记录数
      searchParams: {
        currentPage: 1, //当前页
        limit: 5 //每页显示多少条,
      },
      total: 100, //总条数
      orderForm: {},
      options: [],
      selectParams: [
        {
          value: "1",
          label: "邮箱"
        },
        {
          value: "2",
          label: "教室名称"
        },
        {
          value: "3",
          label: "申请人"
        }
      ],
      checkOrderDialog: false,
      messageDialog: false,
      messageForm: {
        content: ""
      },

      messageRules: {
        content: [
          { required: true, message: "留言内容不能为空", trigger: "blur" }
        ]
      },
      folder: false,
      historyMessageList: [],
      timeLineIsReverse: true,
      editorOption: {
        placeholder: "请输入",
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
            ["blockquote", "code-block"], //引用，代码块
            [{ header: 1 }, { header: 2 }] // 标题，键值对的形式；1、2表示字体大小
          ]
        }
      }
    };
  },
  methods: {
    exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/excel/Export2Excel");
        const tHeader = [
          "申请人",
          "手机号",
          "教室",
          "开始时间",
          "结束时间",
          "申请状态",
          "审批人",
          "审批时间",
          "申请人签名"
        ];
        const filterVal = [
          "applicant",
          "applicantPhone",
          "classroomName",
          "beginTime",
          "endTime",
          "status",
          "reviewer",
          "reviewerTime"
        ];

        const list = JSON.parse(JSON.stringify(this.orderList));
        list.forEach(el => {
          let applyStatus = el.applyStatus;
          switch (applyStatus) {
            case 0:
              el.status = "待审核";
              break;
            case 1:
              el.status = "审核通过";
              break;
            case 2:
              el.status = "已驳回";
              break;
            default:
              break;
          }
        });

        const data = this.formatJson(filterVal, list);
        let nowDate = new Date();
        nowDate = moment(nowDate).format("YYYY-MM-DD");
        export_json_to_excel(tHeader, data, nowDate + "·预定信息详情");
      });
    },
    // 参数过滤
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    filterTag(value, row) {
      return row.applyStatus === value;
    },
    confirmCancel() {
      this.folder = false;
      this.messageDialog = true;
    },
    getAllHistoryMessage() {
      this.$http
        .get("/board/all/" + this.orderForm.applyId)
        .then(resp => {
          let { messageList } = resp.data.data;
          if (messageList.length == 0) {
            this.$message.info("留言历史为空");
          }
          this.historyMessageList = messageList;
        })
        .catch(resp => {});
    },
    isfolder() {
      this.folder = !this.folder;
    },
    addMessage(messageRulesRef) {
      // 再添加留言
      this.$refs[messageRulesRef].validate(valid => {
        const params = new URLSearchParams();
        params.append("applyId", this.orderForm.applyId);
        params.append("content", this.messageForm.content);
        params.append("userId", this.orderForm.userId);
        if (valid) {
          this.$http
            .post("/board/entity", params)
            .then(resp => {
              let { code, msg } = resp.data;
              if (code === 1) {
                this.$message.success(msg);
                this.getAllHistoryMessage();
                this.folder = true;
              } else {
                return this.$message.error(msg);
              }
            })
            .catch(resp => {});
        }
      });
    },
    // 确认审核，status=1
    toConfirm() {
      const params = new URLSearchParams();
      params.append("status", 1);
      // 咱们的操作
      this.$http
        .put("/apply/apply-id/" + this.orderForm.applyId, params)
        .then(resp => {
          let { code, msg } = resp.data;
          if (code === 1) {
            // 更新图标
            this.$message.success("已审核");
            this.reload();
            return (this.checkOrderDialog = false);
          }
          return this.$message.error(msg);
        })
        .catch(resp => {});
    },

    // 驳回审核
    toReject() {
      const params = new URLSearchParams();
      params.append("status", 2);
      // 咱们的操作
      this.$http
        .put("/apply/apply-id/" + this.orderForm.applyId, params)
        .then(resp => {
          let { code, msg } = resp.data;
          if (code === 1) {
            this.$message.success("驳回成功");
            this.checkOrderDialog = false;
            return (this.messageDialog = false);
          }
          return this.$message.error(msg);
        })
        .catch(resp => {});
    },

    openCheckOrder(row) {
      this.orderForm = {};
      this.getApplyOrderByApplyId(row.applyId);
      this.checkOrderDialog = true;
    },

    getOrderList() {
      let status = this.$route.query.applystatus;
      this.$http
        .get("/apply/applylist", {
          params: {
            page: this.searchParams.currentPage,
            limit: this.searchParams.limit,

            type: this.searchParams.type,
            key: this.searchParams.searchParam,
            applyStatus: status
          }
        })
        .then(resp => {
          let { code } = resp.data;
          let { applyReportVOList, total } = resp.data.data;
          if (code === 1) {
            this.orderList = applyReportVOList;
            this.total = parseInt(total);
          } else {
            this.$message.error(msg);
          }
        })
        .catch(resp => {});
    },
    getApplyOrderByApplyId(applyId) {
      this.$http
        .get("/apply/noAuthorize/one", {
          params: {
            id: applyId
          }
        })
        .then(resp => {
          let { code, msg } = resp.data;
          let { applyReport } = resp.data.data;
          if (code === 1) {
            return (this.orderForm = applyReport);
          }
          return this.$message.info(msg);
        })
        .catch(resp => {});
    },

    isconfirmDelete(row) {
      this.$http
        .delete("/apply/apply-id/" + row.applyId)
        .then(resp => {
          let { code, msg } = resp.data;
          if (code === 1) {
            this.$message({
              showClose: true,
              message: msg,
              type: "success"
            });
          } else {
            this.$message({
              showClose: true,
              message: msg,
              type: "warning"
            });
          }
          this.getOrderList();
        })
        .catch(resp => {});
    },

    handleSizeChange(val) {
      this.searchParams.limit = val;
      this.getOrderList();
    },
    handleCurrentChange(val) {
      this.searchParams.currentPage = val;
      this.getOrderList();
    },
    refreshTable() {
      window.location.href = "http://localhost:7878/#/order";
      this.reload();

      this.$message.success("已刷新");
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(resp => {
          this.getOrderList();
          this.checkOrderDialog = false;
          this.messageDialog = false;
          done();
        })
        .catch(resp => {
          this.getOrderList();
        });
    },
    closeDialog() {
      this.getOrderList();
    }
  },
  created() {
    this.getOrderList();
  },

  // 监听器-监听data属性
  watch: {
    folder(val) {
      if (val) {
        this.getAllHistoryMessage();
      }
    }
  }
};
</script>

<style scoped>
.el-input {
  width: 150px;
  margin-right: 10px;
}
.el-row {
  margin-bottom: 10px;
}
.refresh {
  float: right;
  margin-right: 20px;
}

.form-input {
  width: 200px;
}
.el-form {
  margin-left: 30px;
}
.el-card {
  margin-top: 20px;
}

.batchdelete {
  margin-left: 38px;
}
.el-input,
.el-textarea {
  width: 217px;
}
.searchParamInput {
  width: 170px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 35%;
}
.deleteOrder {
  margin-left: 10px;
}
.form-input-reason {
  width: 560px;
}
.apply-tag {
  margin-left: 14px;
}
.inspect {
  margin-left: 14px;
}
.tag-pattern {
  margin-top: 10px;
}
.message-apply-num {
  padding: 10px 82px;
  width: 350px;
}
.message-app-body {
  margin-left: 5px;
}

.open-history-folder {
  margin-left: 350px;
}
.operation-check-ok {
  margin-right: 20px;
}
.operation-check-cancel {
  margin-left: 20px;
}
.dialogDiv {
  height: 300px;
  overflow: auto;
}
.el-breadcrumb {
  margin-top: 10px;
}
.edit_container {
  width: 300px;
}
</style>